{include file="public/header" /}
<style>
    .layui-form-label em {
        color: red;
    }

    .layui-form-mid {
        font-size: 12px;
        color: #DADADA !important;
    }

    #demo2 .layui-upload-img {
        height: 100px;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>发布商品</h5>
        </div>
        <div class="ibox-content">
            <div class="example-wrap">
                <div class="example" id="product_add">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-col-md6" style="padding: 0 15px 0 0;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品分类<em>*</em></label>
                                <div class="layui-input-block">
                                    <select name="cate_id" class="layui-input" lay-verify="required" lay-verType="tips">
                                        <option value="">--- 请选择 ---</option>
                                        {foreach name="cate" id='value'}
                                        <option value="{$value['product_cate_id']}">{$value['product_cate_name']}
                                        </option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品名称<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="text" name="goods_name" class="layui-input" placeholder="请输入商品名称"
                                           lay-verify="required|title" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">商品标题名称长度至少3个字符，最长50个汉字</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">商品简介</label>
                                <div class="layui-input-block">
                                    <textarea name="goods_desc" class="layui-textarea" lay-verify="desc"
                                              lay-verType="tips"></textarea>
                                    <div class="layui-form-mid layui-word-aux">商品简介最长不能超过140个汉字</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">商品货号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="goods_no" class="layui-input" placeholder="请输入商品货号">
                                    <div class="layui-form-mid layui-word-aux">商家货号是指商家管理商品的编号 最多可输入20个字符</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品品牌</label>
                                <div class="layui-input-block">
                                    <select name="brand_id" class="layui-input" lay-verify="" lay-verType="tips">
                                        <option value="">--- 请选择 ---</option>
                                        {foreach name="brand" id='value'}
                                        <option value="{$value['brand_id']}">{$value['brand_name']}</option>
                                        {/foreach}
                                    </select>
                                    <div class="layui-form-mid layui-word-aux">可不选,为了用户更好检索到该商品，最好选择</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">市场价<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="text" name="goods_market_price" class="layui-input"
                                           placeholder="请输入市场价"
                                           lay-verify="required|price" id="shiChangJia" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">
                                        价格必须是0.00~9999999之间的数字，此价格仅为市场参考售价，请根据该实际情况认真填写。
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">本店售价<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="text" name="goods_price" class="layui-input" placeholder="请输入本店售价"
                                           lay-verify="required|price|benDian" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">价格必须是0.00~9999999之间的数字，此价格为商品实际销售价格</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">成本价</label>
                                <div class="layui-input-block">
                                    <input type="text" name="goods_cost_price" class="layui-input" placeholder="请输入成本价"
                                           lay-verify="price" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">
                                        价格必须是0.00~9999999之间的数字，此价格为商户对所销售的商品实际成本价格进行备注记录，非必填选项，不会在前台销售页面中显示
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品重量<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="number" name="goods_weight" class="layui-input" placeholder="请输入商品重量"
                                           lay-verify="required|number" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">克 (以克为单位)</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6" style="padding: 0 0 0 15px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">是否包邮<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="radio" name="is_free" class="layui-input" value="1" title="是">
                                    <input type="radio" name="is_free" class="layui-input" value="0" title="否" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">最新<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="radio" name="is_new" class="layui-input" value="1" title="是">
                                    <input type="radio" name="is_new" class="layui-input" value="0" title="否" checked>
                                </div>
                                <div class="layui-form-mid layui-word-aux">将推荐到首页最新板块显示</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">热门<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="radio" name="is_hot" class="layui-input" value="1" title="是">
                                    <input type="radio" name="is_hot" class="layui-input" value="0" title="否" checked>
                                </div>
                                <div class="layui-form-mid layui-word-aux">将推荐到首页热门板块显示</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">总库存<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="number" name="goods_stock" class="layui-input" value="100"
                                           placeholder="请输入总库存" lay-verify="required|number" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">商铺库存数量必须为0~999999999之间的整数</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品关键词</label>
                                <div class="layui-input-block">
                                    <input type="text" name="goods_keywords" class="layui-input"
                                           placeholder="请输入商品关键词"
                                           lay-verify="" lay-verType="tips">
                                    <div class="layui-form-mid layui-word-aux">多个关键词，用 '|' 隔开</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品图片<em>*</em></label>
                                <div class="layui-input-block">
                                    <input type="hidden" id="brand_logo" name="goods_photo" value="">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                                        <div class="layui-upload-list">
                                            <img class="layui-upload-img" id="demo1"
                                                 src="/static/images/not-f.jpg" style="height: 100px;">
                                            <p id="demoText"></p>
                                        </div>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">上传商品默认主图（单张）</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">缩略图</label>
                                <div class="layui-input-block">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="test2">上传图片</button>
                                        <div class="layui-upload-list">
                                            <ul id="demo2" class="layui-clear"></ul>
                                        </div>
                                        <p id="demoText2"></p>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">上传商品缩略图（多张）</div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">商品详情描述<em>*</em></label>
                                <div class="layui-input-block">
                                    <div class="layui-upload">
                                        <script src="/static/admin/ueditor/ueditor.config.js"
                                                type="text/javascript"></script>
                                        <script src="/static/admin/ueditor/ueditor.all.js"
                                                type="text/javascript"></script>
                                        <textarea name="content" style="width:100%" id="myEditor"></textarea>
                                        <script type="text/javascript">
                                            var editor = new UE.ui.Editor();
                                            editor.render("myEditor");
                                        </script>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">商品详情描述</div>
                                </div>
                            </div>
                            <div class="layui-form-item" style="text-align: center">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="product_add">
                                    <i class="fa fa-save"></i> 保存
                                </button>
                                <button type="button" class="layui-btn layui-btn-danger" onclick="history.go(-1);">
                                    <i class="fa fa-close"></i> 返回
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script type="text/javascript">
    var form = layui.form, upload = layui.upload;

    // 默认主图上传
    var uploadInst = upload.render({
        elem: '#test1',
        url: "{:url('Upload/uploads')}",
        data: {path: 'goods'},
        before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        },
        done: function (res) {
            //如果上传失败
            if (res.code > 0) {
                return layer.msg(res.msg);
            } else {
                $('#brand_logo').val(res.data);
            }
            //上传成功
        },
        error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

    // 缩略图上传
    var uploadInst2 = upload.render({
        elem: '#test2',
        url: "{:url('Upload/uploads')}",
        data: {path: 'test'},
        multiple: true,
        before: function (response) {
            //预读本地文件示例，不支持ie8
            /*response.preview(function (index, file, result) {
                var $html = '<li><img src="' + result + '" class="layui-upload-img" alt=""><input type="hidden" name="goods_pic[]" value=""/></li>';
                $('#demo2').append($html); //图片链接（base64）
            });*/
        },
        allDone: function (response) {
            var total = response.total, successful = response.successful, aborted = response.aborted;
            if (total == successful) {
                layer.msg('全部上传成功', {icon: 1});
            } else if (total == response) {
                layer.msg('上传失败', {icon: 2});
            } else {
                layer.msg('部份上传成功', {icon: 1});
            }
        },
        done: function (response) {
            //如果上传失败
            if (response.code > 0) {
                return layer.msg(response.msg);
            } else {
                var $html = '<li><b>&times;</b><img src="/static/uploads/test/' + response.data + '" class="layui-upload-img" alt=""><input type="hidden" name="pic[]" value="' + response.data + '"/></li>';
                $('#demo2').append($html);
            }
            //上传成功
        },
        error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText2');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

    /**
     * 表单验证
     */
    form.verify({
        desc: [/^.{0,140}$/, '商品简介最长不能超过140个汉字'],
        title: [/^.{3,50}$/, '商品标题名称长度为3-50个字符之间'],
        price: function (value, item) {
            if (value) {
                if (!/^\d+(\.\d{1,2})?$/.test(value))
                    return '请输入正确的人民币金额';
            }
        },
        benDian: function (value, item) {
            var shiChangJia = $('#shiChangJia').val();
            if (value > shiChangJia) {
                return '价格不能大于市场价';
            }
        }
    });

    /**
     * 发布商品
     */
    form.on('submit(product_add)', function (data) {
        var param = data.field;
        if (!param.goods_photo) {
            layer.msg('请上传商品主图');
            return false;
        }
        if (!param.content) {
            layer.msg('请输入商品详情描述');
            return false;
        }
        var load = layer.load(2);
        $.post("{:url('product_add')}", param, function (response) {
            layer.close(load);
            if (response.code === 200) {
                layer.msg(response.msg, {icon: 1}, function (index) {
                    location.href = "{:url('product')}";
                });
            } else {
                layer.msg(response.msg, {icon: 2});
            }
        });
        return false;
    });

    /**
     * 删除缩略图
     */
    $('#demo2').delegate('b', 'click', function () {
        var _this = $(this);
        layer.confirm('确定要删除该图片吗?', {
            title: false, closeBtn: false, btnAlign: 'c', yes: function (index, obj) {
                _this.parent().remove();
                layer.close(index);
            }
        });
    })
</script>
</body>
</html>